<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        .header {
            display: flex;
            justify-content: center;
            position: relative;
            width: 100%;
            height: 180px;
            overflow: hidden;
        }
        .header-video {
            height: 100%;
        }
        .header-front-img {
            /* 为了实现缩小时仍然可以看见叶子 */
            width: 120%;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <header class="header">
        <!-- 无法自动播放时可以尝试添加 muted -->
        <video loop autoplay muted src="./1.mp4" class="header-video"></video>
        <img src="./2.png" alt="" class="header-front-img">
    </header>

    <script>
        var header = document.querySelector(".header")
        var headerVideo = document.querySelector('.header-video')
        var headerFrontImg = document.querySelector('.header-front-img')
        // 鼠标进入时的位置横坐标
        var posX

        // 鼠标进入时
        header.onmouseover = function(e) {
            posX = e.clientX
            headerVideo.style.transition = "none"
            headerFrontImg.style.transition = "none"
        }
        // 鼠标移动时，头部跟随
        header.onmousemove = function(e) {
            // 模板字符串（不是单引号，是键盘数字1的左边按钮）
            headerVideo.style.transform = `translateX(${(e.clientX - posX) / 25}px)`
            headerFrontImg.style.transform = `translateX(${(e.clientX - posX) / 16}px)`
        }
        // 鼠标离开时头部回正（前景、背景的回正速度不一样）
        header.onmouseout = function(e) {
            headerVideo.style.transition = ".6s"
            headerFrontImg.style.transition = "1.2s"
            headerVideo.style.transform = `translateX(0px)`
            headerFrontImg.style.transform = `translateX(0px)`
        }
    </script>
</body>
</html>